<template>
  <div
    class="data-view"
    :class="[customClass]"
    v-bind="layoutProps"
    :style="boxStyle"
    :key="widget.id"
    v-show="!widget.options.hidden"
  >
    <div class="controlContent">
      <el-button v-if="showAdd" type="primary" @click="add" size="mini"
        >新增</el-button
      >
      <el-button v-if="isBatchDel" @click="batchDel" size="mini"
        >删除</el-button
      >

      <div
        class="controlContentOperate"
        v-if="columnSelect || refresh || showSearch"
      >
        <el-button
          icon="el-icon-search"
          circle
          size="mini"
          v-if="showSearch"
        ></el-button>
        <el-button
          icon="el-icon-refresh"
          circle
          size="mini"
          v-if="refresh"
        ></el-button>
        <el-button
          icon="el-icon-s-operation"
          circle
          size="mini"
          v-if="columnSelect"
          @click="showColumn = true"
        ></el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      size="mini"
      v-if="isBatch"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        v-for="item in headData"
        :v-if="item.visible"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        :sortable="item.sort"
        :column-key="item.value"
        :filters="getFilterNameItem()"
      >
        <template slot-scope="{ row }">
          {{ item.value }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        v-if="operateColumn"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="viewRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click.native.prevent="addRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            新增
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :data="tableData"
      border
      size="mini"
      v-else
      @cell-click="(row, column) => handleClick({ column })"
    >
      <el-table-column
        v-for="item in headData"
        :v-if="item.visible"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        :class-name="item.current ? 'cellSelected' : ''"
      >
        <template slot-scope="{ row }">
          {{ item.value }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        v-if="operateColumn"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="viewRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click.native.prevent="addRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            新增
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      :style="{ textAlign: 'right' }"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import emitter from "@/utils/emitter";
import i18n from "../../../utils/i18n";
import refMixin from "../refMixin";
import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";

export default {
  name: "DataGridItem",
  componentName: "DataGridItem",
  mixins: [emitter, i18n, refMixin],
  components: {
    ...FieldComponents,
  },
  props: {
    widget: Object,
    widget: Object,
    fatherData: Object,
    colHeight: {
      type: String,
      default: null,
    },
  },
  inject: ["refList", "globalModel", "formConfig", "previewState"],
  data() {
    return {
      layoutProps: {
        span: this.widget.options.span,
        md: this.widget.options.md || 12,
        sm: this.widget.options.sm || 12,
        xs: this.widget.options.xs || 12,
        offset: this.widget.options.offset || 0,
        push: this.widget.options.push || 0,
        pull: this.widget.options.pull || 0,
      },
      entityData: {},
      selectedData: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      showColumn: false,
    };
  },
  computed: {
    customClass() {
      console.log("this.widgetthis.widget", this.widget);
      return this.widget.options.customClass || "";
    },
    tableData() {
      return this.widget.options.tableData || [];
    },
    headData() {
      return this.widget.options.headData || [];
    },
    entity() {
      return this.widget.options.entity || "";
    },
    isBatch() {
      return this.widget.options.dataViewConfig.isBatch || "";
    },
    operateColumn() {
      return this.widget.options.dataViewConfig.operateColumn || "";
    },
    showSearch() {
      return this.widget.options.dataViewConfig.showSearch || "";
    },
    showAdd() {
      return this.widget.options.dataViewConfig.showAdd || "";
    },
    pagination() {
      return this.widget.options.dataViewConfig.pagination || "";
    },
    isBatchDel() {
      return this.widget.options.dataViewConfig.isBatchDel || "";
    },
    columnSelect() {
      return this.widget.options.dataViewConfig.columnSelect || "";
    },
    refresh() {
      return this.widget.options.dataViewConfig.refresh || "";
    },

    selectEntity() {
      return this.widget.options.customClass || "";
    },

    boxStyle() {
      const initStyle = this.widget.options.initStyle || {};
      if (!initStyle) {
        return {};
      }
      const style = {
        width:
          initStyle.width && initStyle.width.indexOf("%") > -1
            ? initStyle.width
            : initStyle.width + "px",
        // height:initStyle.height&&initStyle.height.indexOf('%') > -1 ? initStyle.height : initStyle.height + 'px',
        minHeight:
          initStyle.minHeight && initStyle.minHeight.indexOf("%") > -1
            ? initStyle.height
            : initStyle.height + "px",
        backgroundColor: initStyle.backgroundColor,
        color: initStyle.color,
     margin: this.getNumber(initStyle.margin),
        padding: this.getNumber(initStyle.padding),
        textAlign: initStyle.textAlign,
      };
      return style;
    },
  },
  created() {
    this.initLayoutProps();
    this.initRefList();
  },
  methods: {
    getNumber(num){
      if(Number(num) || Number(num)===0){
        return `${num}px`
      }
      if(num.indexOf(',')>-1){
        const newData = num.split(',');
        const newDataPx= newData.map(v=>(`${v}px`));
        return newDataPx.join(' ');
      }
      
      if(isNaN(Number(num))){
        return 0;
      }
      return `${num}px`
    },
    handleClick({ column }) {
      console.log("columncolumn", column);
      this.headData.forEach((item) => {
        if (item.prop === column.property) {
          item.current = true;
        } else {
          item.current = false;
        }
      });
    },
    getFilterNameItem() {},
    colClick(column, e) {
      console.log("column,ecolumn,ecolumn,ecolumn,ecolumn,e", column);
      console.log("column,ecolumn,eeeeeeeeeeeeee,,,e", e);
    },
    filterHandler(val) {
      console.log("valval", val);
    },

    add() {},
    batchDel() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      this.selectedData = val;
    },
    viewRow(index, data) {
      console.log("index,data", index, data);
    },
    addRow(index, data) {
      console.log("index,data", index, data);
    },
    deleteRow(index, data) {
      console.log("index,data", index, data);
    },
    initLayoutProps() {
      if (this.widget.options.responsive) {
        if (this.previewState) {
          this.layoutProps.md = undefined;
          this.layoutProps.sm = undefined;
          this.layoutProps.xs = undefined;

          let lyType = this.formConfig.layoutType;
          if (lyType === "H5") {
            this.layoutProps.span = this.widget.options.xs || 12;
          } else if (lyType === "Pad") {
            this.layoutProps.span = this.widget.options.sm || 12;
          } else {
            this.layoutProps.span = this.widget.options.md || 12;
          }
        } else {
          this.layoutProps.span = undefined;
        }
      } else {
        this.layoutProps.md = undefined;
        this.layoutProps.sm = undefined;
        this.layoutProps.xs = undefined;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cellSelected {
  border-color: #409EFF !important;
  border-left:1px solid;
  border-right:1px solid;
  background: #ecf5ff !important;
  color: #409EFF !important;
  font-weight: 600;
}
th.cellSelected {
  border-top:1px solid;
}

.columnOperateDrawer{
  width: auto !important;
  .columnOperate{
    padding: 20px;
  }
}

.data-view {
  min-height: 38px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  border: 1px dashed rgba(170, 170, 170, 0.75);
  &.selected {
    border: 1px solid #409eff;
  }
  &.noEntity {
    border: 1px dashed red;
  }
  .form-widget-list {
    min-height: 46px;
  }
  .controlContent {
    margin-bottom: 20px;
    display: flex;
    .controlContentOperate {
      flex: 1;
      text-align: right;
    }
  }
  
 
  ::v-deep .el-table th.el-table__cell > .cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    width: 100%;
    white-space: nowrap;
  }
}
</style>


